<template>
  <div class="tansfer">
    <Poptip content="提示内容" placement="bottom">
      <button>显示内容</button>
      <div class="api" slot="content">
        <CheckboxGroup v-model="social" @on-change="checkAllGroupChange">
          <Checkbox label="twitter">
            <Icon type="logo-twitter"></Icon>
            <span>Twitter</span>
          </Checkbox>
          <Checkbox label="facebook">
            <Icon type="logo-facebook"></Icon>
            <span>Facebook</span>
          </Checkbox>
          <Checkbox label="github">
            <Icon type="logo-github"></Icon>
            <span>Github</span>
          </Checkbox>
          <Checkbox label="snapchat">
            <Icon type="logo-snapchat"></Icon>
            <span>Snapchat</span>
          </Checkbox>
        </CheckboxGroup>
      </div>
    </Poptip>
    <div>
      <Table :columns="columns15" :data="data11" border show-summary></Table>
      <br />
      <Table
        :columns="columns15"
        :data="data11"
        border
        show-summary
        :summary-method="handleSummary"
        height="200"
      ></Table>
      <Card>
        <PracticeTable></PracticeTable>
      </Card>
      <Card>
        <SeclectTransfer></SeclectTransfer>
      </Card>
      <Card>
        <DownloadExcle></DownloadExcle>
      </Card>
      <Card>
        <PracticeTablew></PracticeTablew>
      </Card>
    </div>
  </div>
</template>
<script>
    import PracticeTable from '../components/practiceTablew.vue';
    import SeclectTransfer from '../components/SeclectTransfer.vue';
    import DownloadExcle from '../components/downloadExcle.vue';
    import PracticeTablew from '../components/practiceTablew.vue';

    export default {
        components: {
            PracticeTable,
            SeclectTransfer,
            DownloadExcle,
            PracticeTablew
        },
        data () {
            return {
                value: '你是谁',
                clearData: ['年后', '年前', '吃什么'],
                social: ['facebook', 'github'],
                columns15: [
                    {
                        title: 'ID',
                        key: 'id'
                    },

                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Amount1',
                        key: 'amount1'
                    },
                    {
                        title: 'Amount2',
                        key: 'amount2'
                    },
                    {
                        title: 'Amount3',
                        key: 'amount3'
                    },
                    {
                        title: 'Total',
                        key: 'total',
                        render (row, column, index) {
                            return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                        }
                    }
                ],
                data11: [
                    {
                        id: '100001',
                        name: 'John Brown',
                        amount1: '123',
                        amount2: '',
                        amount3: 10
                    },
                    {
                        id: '100002',
                        name: 'Jim Green',
                        amount1: '234',
                        amount2: '2.3',
                        amount3: 11
                    }
                ]
            };
        },
        methods: {
            checkAllGroupChange (data) {
                console.log(data);
                console.log('小老头');
            },
            handleSummary ({ columns, data }) {
                const sums = {};
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (index === 0) {
                        sums[key] = {
                            key,
                            value: '总价'
                        };
                        return;
                    }
                    const values = data.map(item => Number(item[key]));
                    if (!values.every(value => isNaN(value))) {
                        const v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[key] = {
                            key,
                            value: v + ' 元'
                        };
                    } else {
                        sums[key] = {
                            key,
                            value: 'N/A'
                        };
                    }
                });

                return sums;
            }
        }
    };
</script>
